{include file="public/header"}

<script src="/public/static/mobile/js/axios.min.js"></script>
		<style type="text/css">
	
			.mainPage .contentBoxs .boxs1{
				width: 100%;
				height: auto;
				background-color: #fff;
				border-radius: 10px;
				height: auto;
				margin-top: 10px;
				padding-bottom: 0.8rem;
			}
			.mainPage .contentBoxs .boxs1 .titleBoxs{
				width: 100%;
				height: 1.3rem;
				line-height: 1.3rem;
				font-size: 0.5rem;
				color: #2E3192;
				text-align: center;
				letter-spacing: 4px;
				position: relative;
			}
			.mainPage .contentBoxs .boxs1 .titleBoxs:after{
				content: "";
				width: 76%;
				height: 1px;
				position: absolute;
				left: 13%;
				bottom: 0;
				background-color: #E6E6E6;
			}
			.mainPage .contentBoxs .boxs1 .centerBoxs{
				width: 76%;
				height: auto;
				box-sizing: border-box;
				margin: auto;
				padding: 20px 0;
			}
			.mainPage .contentBoxs .boxs1 .centerBoxs .rows{
				width: 100%;
				height: auto;
				padding: 8px 0;
			}
			.mainPage .contentBoxs .boxs1 .centerBoxs .rows .lab{
				width: 100%;
				height: auto;
				font-size: 0.32rem;
				color: #000000;
				font-weight: bold;
			}
			.mainPage .contentBoxs .boxs1 .centerBoxs .rows .val{
				font-size: 0.28rem;
				color: #666666;
				padding: 4px 0;
			}
			.mainPage .contentBoxs .boxs1 .centerBoxs .rows .val .inputs{
				width: 100%;
				height: 0.7rem;
				font-size: 0.29rem;
				padding-left: 5px;
				box-sizing: border-box;
				outline: none;
				border: 1px solid #ccc;
			}
			.mainPage .contentBoxs .boxs1 .centerBoxs .rows .val .inputs::-webkit-input-placeholder {
			    font-size: 0.29rem;
			}
			.mainPage .contentBoxs .boxs1 .centerBoxs .rows .val .textareas{
				width: 100%;
				height: 2rem;
				font-size: 0.29rem;
				padding-left: 5px;
				box-sizing: border-box;
				outline: none;
				padding-top: 0.1rem;
				border: 1px solid #ccc;
			}
			.mainPage .contentBoxs .boxs1 .centerBoxs .rows .val .textareas::-webkit-input-placeholder {
			    font-size: 0.29rem;
			}
			.mainPage .contentBoxs .boxs1 .centerBoxs .rows .imgBoxs{
				width: 100%;
				height: auto;
				padding: 0.2rem 0;
			}
			.mainPage .contentBoxs .boxs1 .centerBoxs .rows .imgBoxs .imgs{
				width: calc(33.33333% - 0.14rem);
				height: 1.5rem;
				border-radius: 5px;
				overflow: hidden;
				background-color: #eee;
				margin-right: 0.14rem;
				margin-bottom: 0.14rem;
				float: left;
				position: relative;
			}
			.mainPage .contentBoxs .boxs1 .centerBoxs .rows .imgBoxs .imgs .del{
				font-size: 0.36rem;
				width: 0.4rem;
				height: 0.4rem;
				line-height: 0.4rem;
				text-align: center;
				border-radius: 50%;
				position: absolute;	
				top: 0.05rem;
				right: 0.05rem;
				background-color: rgba(0,0,0,0.6);
				color: #fff;
			}
			.mainPage .contentBoxs .boxs1 .centerBoxs .rows .imgBoxs .imgs.addimgBx{
				background-color: #eee;
			}
			.mainPage .contentBoxs .boxs1 .centerBoxs .rows .imgBoxs .imgs.addimgBx .text1{
				font-size: 0.4rem;
				width: 100%;
				height: auto;
				text-align: center;
				padding-top: 0.2rem;
				color: #777;
			}
			.mainPage .contentBoxs .boxs1 .centerBoxs .rows .imgBoxs .imgs.addimgBx .text2{
				font-size: 0.26rem;
				width: 100%;
				height: auto;
				text-align: center;
				color: #777;
			}
			.mainPage .contentBoxs .boxs1 .centerBoxs .rows  .videoBoxs{
				width: 100%;
				height: 2.5rem;
				background-color: #eee;
				margin: 0.2rem 0;
				position: relative;
			}
			.mainPage .contentBoxs .boxs1 .centerBoxs .rows  .videoBoxs .delVideo{
				font-size: 0.36rem;
				width: 0.5rem;
				height: 0.5rem;
				line-height: 0.5rem;
				text-align: center;
				border-radius: 50%;
				position: absolute;	
				top: 0.05rem;
				right: 0.05rem;
				background-color: rgba(0,0,0,0.6);
				color: #fff;
				z-index: 5;
			}
			.mainPage .contentBoxs .boxs1 .centerBoxs .rows  .videoBoxs.addVideo{
				background-color: #eee;
				border-radius: 5px;
				overflow: hidden;
			}
			.mainPage .contentBoxs .boxs1 .centerBoxs .rows  .videoBoxs.addVideo .text1{
				font-size: 0.4rem;
				width: 100%;
				height: auto;
				text-align: center;
				padding-top: 0.7rem;
				color: #777;
			}
			.mainPage .contentBoxs .boxs1 .centerBoxs .rows  .videoBoxs.addVideo .text2{
				font-size: 0.26rem;
				width: 100%;
				height: auto;
				text-align: center;
				color: #777;
			}
			.mainPage .contentBoxs .boxs1 .centerBoxs .btnBox{
				width: 100%;
				height: auto;
			}
			.mainPage .contentBoxs .boxs1 .centerBoxs .btnBox .btn{
				width: 2rem;
				height: 0.7rem;
				background-color: #394B8F;
				border: 0;
				outline: none;
				color: #fff;
				font-size:0.34rem;
				letter-spacing: 0.1rem;
			}
			
			
			
		</style>

		<div id="index">
			
			<div class="mainPage">
				<div class="contentBoxs">
					<div class="bgBox" :style="{minHeight: winHeight}"></div>
					<div style="position: relative;z-index: 8;">
                     
						<div class="boxs1">
							<div class="titleBoxs">填写维修记录</div>
							<div class="centerBoxs">
								
								
								<!-- <div class="rows">
									<div class="lab">图片</div>
									<div class="imgBoxs" id="imgBox">
										<div class="imgs" v-show="list.length>0" v-cloak v-for="(v,i) in list" :key="i" >
											<img :src="v.src" :data-imgurl="v.src" style="width: 100%;height:100%;"/>
											<div class="del" @click="delImg(i)">×</div>
										</div>
										<div class="imgs addimgBx" @click="choiceImg" v-if="list.length<limitNum">
											<div class="text1">+</div>
											<div class="text2">点击上传</div>
											<input type="file" ref="filElem" accept="image/*" multiple class="up-file" id="add-pic-btn" @change="addImg()" style="opacity: 0;">
										</div>
										<div style="clear: both;"></div>
									</div>
								</div> -->
								<div class="rows">
									<div class="lab">视频</div>
									<div class="videoBoxs addVideo" v-show="videoSrc">
										<video :src="videoSrc1" controls="controls" width="100%" height="100%"></video>
										<div class="delVideo" @click="delVideo()">×</div>
									</div>
									<div class="videoBoxs addVideo" @click="choiceVideo" v-show="!videoSrc">
										<div class="text1">+</div>
										<div class="text2">点击上传</div>
										<input type="file" ref="filElemVideo" accept="video/*" multiple  @change="getBigectURL($event)" style="opacity: 0;"/>
	
									</div>
								</div>
								<!-- <div class="rows">
									<div class="lab">视频</div>
									<div class="val"><input  type="file" id="file_video"  accept="video/*" multiple  @click="upvideo($event)" /></div>
								</div> -->
								<div class="rows">
									<div class="lab" id="sp">视频</div>
									<div class="val">
										<div class="ad-img">
									
									<ul class="sctp mt15">
										<li><div class="upload-btn"><input type="file" accept="video/*" name="" id=""></div>
										</li>
									</ul>
									</div>
								</div>
								
								
								<div class="btnBox"><button class="btn" v-on:click="submit">提交</button></div>
							</div>
						</div>
                      
					</div>
				</div>
			</div>
			
         
		</div>

		<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>


<script type = "text/javascript">
	new Vue({
	  	el: '#index',
	  	data: function () {
		  	return {
                showstate:false,  //提示窗
		  		toastMsg:"",   //提示窗的文字
				sn:"",
				deviceName:"",
		  		
		  		winHeight:document.documentElement.clientHeight+"px",
		    	
				list:[], //用于结构渲染(图片)
                allArr:[],  //存储每次上传的所有flie，
                limitNum:1, //限制数量
                
                videoSrc: '',  //视频地址
				videoSrc1: '',  //视频预览地址
				
				
			
			
		  	}
	  	},
		  // 创建页面
		created(){
			var _this=this;
			// 获取上一页面的参数
			var sn = decodeURI(window.location.href.split("?")[1]);
			_this.sn=sn.slice(3)
		},
	  	//页面加载需要执行的方法
	  	mounted:function(){
			var _this=this;
        
       },
	  	methods: {
		
			 
	
		

			//选择视频
			choiceVideo(){
				//alert("1111");
				this.$refs.filElemVideo.dispatchEvent(new MouseEvent('click'));
			},
			//上传视频
	  		getBigectURL (event) {
				//alert('23232');
				// return false;
		      	//console.log('getBigectURL', event)
		      	var _this = this;
		      	var file = event.target.files[0];

                  var fileReader = new FileReader();
					
                    	fileReader .readAsDataURL(file);
                    	fileReader .onload = function (e) {
                  
  
                  	axios.post('/api/upload/video_upload.html?path=video&zyw=1', {
                  		img:e.currentTarget.result      // 参数
                  	})
                  	.then(function (res) {
                        console.log(res.data.video);
                          $("#sp").html(res.data.video);
 
                  		// console.log(res.data.video);
                  		// _this.videoSrc = res.data.video;
                  		// _this.videoSrc1 =  e.currentTarget.result;
                  		//console.log(res);		
                  	})
                  	.catch(function (error) {
                  		console.log(error);
                  	});
	
		   
		    }},
			//删除视频
            delVideo(){
            	var _this = this
            	_this.videoSrc="";
            },






	  		
	  	},
	})
</script>
{include file="public/footer"}
